// 虚拟节点上树

import vnode from "./vnode"
import createElement from "./createElement";
import patchVnode from "./patchVnode";

export default function patch(oldVnode, newVnode) {
  // 首次patch可能第一个参数是dom节点---先判断oldVnode是dom节点还是虚拟节点--如果是dom节点，先将其变为虚拟节点
  if (oldVnode.sel === '' || oldVnode.sel === undefined) {
    console.log('首次上树，将dom节点转换成虚拟节点')
    oldVnode = vnode(oldVnode.tagName.toLowerCase(), {}, [], undefined, oldVnode);
  }

  // 判断oldVnode, newVnode是否为同一个节点--同节点比较
  // 判断的方式是：key值和选择器（标签）进行比较
  if (oldVnode.key == newVnode.key && oldVnode.sel == newVnode.sel) {
    console.log('oldVnode与newVnode的key和sel相同---表示同一个虚拟节点, 进行精细化比较');
    patchVnode(oldVnode, newVnode);
  } else {
    console.log('oldVnode与newVnode的key和sel不相同---非同一个节点，暴力插入新的，删除旧的')
    // 返回带有elm属性（dom节点）的vnode
    let newVnodeDom = createElement(newVnode);
    // 插入到标杆节点
    if (oldVnode.elm.parentNode && newVnodeDom) {
      oldVnode.elm.parentNode.insertBefore(newVnodeDom, oldVnode.elm);

      // 删除旧节点
      oldVnode.elm.parentNode.removeChild(oldVnode.elm);
    }
  }
}